<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画的其他属性</title>
  <style>
    .outer {
      width: 1000px;
      height: 100px;
      border: 1px solid black;
    }
    @keyframes wangyoudong {
      from {
      }
      to {
        transform: translateX(900px) rotate(360deg);
        background-color: red;
        border-radius: 50%;
      }
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /* 指定动画的名称 */
      animation-name: wangyoudong;
      /*给动画设置 播放时间*/
      animation-duration: 3s;
      /*给动画设置延迟时间 用来解决变颜色时 第一帧卡顿问题*/
      animation-delay: 1s;
      /* 动画的运动方式 和过渡的属性值是一样的 */
      animation-timing-function: linear;
      /* 动画播放的次数 number 是次数 infinite 是无限播放*/
      animation-iteration-count: infinite;
      /* 指定动画播放的方向 */
      animation-direction: alternate;
      /* 动画之外的状态(停止点) */
      animation-fill-mode: forwards;
    }
    .outer:hover .inner {
      /* 播放状态 停止继续 */
      animation-play-state: paused;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>